<template>
  <el-row type="flex" style="margin: 40px">
    <el-col>
      <el-transfer
        v-model="value"
        :data="data"
        :titles="['备选小组', '抽取结果']"
        target-order="unshift"
        @right-check-change="finishOne"
      />
    </el-col>
    <el-col>
      <el-button type="primary" @click="beginPick">
        开始抽取
      </el-button>
      <h2 class="current">
        {{ current.label }}
      </h2>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    const generateData = (_) => {
      const data = []
      for (let index = 1; index <= 8; index++) {
        data.push({
          key: Math.round(Math.random() * Date.now()).toString(36),
          label: `左 ${index} 小组`
        })
        data.push({
          key: Math.round(Math.random() * Date.now()).toString(36),
          label: `右 ${index} 小组`
        })
      }
      return {
        value: [],
        data,
        temp: data.map(val => ({ ...val }))
      }
    }
    return {
      ...generateData(),
      current: {},
      timer: null,
      startTime: null
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    beginPick() {
      this.startTime = Date.now()
      this.timer = setInterval(() => {
        const selectedIndex = Math.floor(Math.random() * this.temp.length)
        this.current = {
          ...this.temp[selectedIndex],
          index: selectedIndex
        }
        const now = Date.now()
        if (now - this.startTime > 1000) {
          this.stopOne()
          this.startTime = now
        }
        if (!this.temp.length) {
          clearInterval(this.timer)
          this.current = {}
        }
      }, 200)
    },
    stopOne() {
      this.value.unshift(this.current.key)
      this.temp.splice(this.current.index, 1)
    },
    finishOne(key) {
      console.log()
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-transfer-panel__list,
  ::v-deep .el-transfer-panel__body {
    height: 500px;
  }
  .current {
    color: #888
  }
</style>
